<template>
  <view class="container">
    <view class="blue_bg"/>

    <view class="coupon_tab">
      <view v-for="(item,index) in downArr" :key="index" class="coupon_item">
        <view class="item_left">
          ￥
          <text>{{ item.reduce }}</text>
        </view>
        <view class="item_right">
          <view class="title">
            满{{ item.full }}元可用
          </view>
          <view class="center">
            仅限于{{ item.cheShop.storeName }}使用
          </view>
          <view class="footer">
            {{ item.startTime }}-{{ item.endTime }}
          </view>
        </view>
        <view v-if="item.NewState === 0" class="btn_state btn_state_active">
          已领取
        </view>
        <view v-else-if="item.NewState === 1" @click="insertCoupon(item.id)" class="btn_state">
          领取
        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      downArr: [],

    }
  },
  onLoad() {
    this.getData();
  },
  methods: {
    // 插入优惠券
    insertCoupon(id) {
      // console.log(id);
      const that = this;
      this.$http({
        url: `/api/user/userCoupon`,
        method: 'POST',
        data: {
          userId: uni.getStorageSync('user_id'),
          couponId: id,
          state: 1,
          startTime: new Date().getTime(),
        },
        success(res) {
          uni.showToast({
            title: '领取成功',
            icon: 'none',
          })
          that.getData();
        }
      })
    },
    // 获取优惠券领取详情
    getCouponDetail() {
      const that = this;
      this.$http({
        url: `/api/user/userCoupon/list`,
        method: 'GET',
        data: {
          userId: uni.getStorageSync('user_id'),
        },
        success(res) {
          for (let j = 0; j < that.downArr.length; j++) {
            for (let i = 0; i < res.data.rows.length; i++) {
              if (res.data.rows[i].couponId === that.downArr[j].id) {
                that.$set(that.downArr[j], 'NewState', 0);
                break;
              }else {
                that.$set(that.downArr[j], 'NewState', 1);
              }
            }
          }
          // console.log(that.downArr)
          // console.log(res);
        }
      })
    },
    // 获取优惠券列表数据
    getData() {
      const that = this;
      this.$http({
        url: `/api/shanghuliebiao2/coupon/allList`,
        method: 'GET',
        success(res) {
          that.downArr = res.data.data;
          that.getCouponDetail();
          // console.log(res.data.data);
        }
      })
    }
  },

}
</script>

<style>
@import '@/static/images/ryx/all.css';

.coupon_tab {
  width: 90vw;
  padding: 20rpx;
  margin-top: 30rpx;
  border-radius: 20rpx;
  background-color: #fff;
}

.coupon_item {
  height: 20vh;
  margin: 20rpx;
  background-image: url('@/static/images/ryx/asset/quan@2x.png');
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  flex-flow: row nowrap;
  position: relative;
}

.coupon_item .item_left {
  width: 30%;
  margin-top: 50rpx;
  color: #fff;
  font-size: 40rpx;
  text-align: center;
}

.coupon_item .item_left text {
  font-size: 80rpx;
  font-weight: bold;
}

.coupon_item .item_right {
  padding: 20rpx;
  display: flex;
  flex-flow: column;
}

.item_right .title {
  color: #ff7a40;
  font-size: 40rpx;
  font-weight: bold;
}

.item_right .center {
  color: #282624;
}

.item_right .footer {
  margin-top: 40rpx;
  color: #959291;
}

.coupon_item .btn_state {
  height: 50rpx;
  line-height: 50rpx;
  width: 120rpx;
  border-radius: 30rpx;
  text-align: center;
  background-color: #ff7a40;
  color: #fff;
  position: absolute;
  right: 20rpx;
  top: 40%;
}

.btn_state_active {
  background-color: #d9d9d9 !important;
}
</style>